<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="inc/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <%@ include file="inc/meta.jsp" %>
    <meta name="description" content="">
    <meta name="author" content="">
    <title>广告详情</title>
    <%@ include file="inc/css.jsp" %>
</head>
<body>

<div id="posts" class="wrapper">

    <%@ include file="inc/nav.jsp" %>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">广告列表</h1>
                <h4 style="margin-left: 10px;">——广告详情</h4>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <form id="infoForm" method="post" action="backend/videoType/save" class="form-horizontal" role="form" enctype="multipart/form-data">
                            <input type="hidden" name="bannerId" value="${banner.id}"/>
                            <input type="hidden" id="bannerVideoId" value="${banner.videoId}"/>
                            <input type="hidden" id="bannerVideoTypeId" value="${banner.typeId}"/>
                            <input type="hidden" id="bannerCover" value="${banner.cover}"/>
                            <input type="hidden" id="bannerLinkUrl" value="${banner.linkUrl}"/>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">广告图片:</label>

                                <div class="col-sm-4" style="padding-top: 6.5px;">
                                    <input type="file" name="cover" id="mainImage" style="display:none;"/>
                                    <a href="javascript:void(0);" onclick="_bannerInfo.fn.AddImg()">
                                        <img id="mainPicture" src="static/images/add.jpg" style="height: 200px; width: 200px; display: inline; margin-bottom: 5px;" border="1"/>
                                    </a>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">类型:</label>

                                <div class="col-sm-8" style="padding-top: 6.5px;">
                                    <input type="radio" id="radioOne" value="1" onclick="_bannerInfo.fn.changeRadio(1,1)" name="bannerType"/>外链
                                    <input type="radio" id="radioTwo" value="2" onclick="_bannerInfo.fn.changeRadio(2,1)" name="bannerType"/>链接位置
                                </div>
                            </div>

                            <div class="form-group" id="divOne">
                                <label class="col-sm-2 control-label">链接地址:</label>

                                <div class="col-sm-4" style="padding-top: 6.5px;">
                                    <input type="text" class="form-control" id="linkUrl" name="linkUrl" maxlength="100"
                                           data-rule="required" value="${banner.linkUrl}" placeholder="请输入外链地址"/>
                                </div>
                            </div>

                            <div class="form-group" id="divTwo">
                                <label class="col-sm-2 control-label">分类:</label>

                                <div class="col-sm-4" style="padding-top: 6.5px;">
                                    <select class="form-control" id="videoTypeList" name="videoTypeId"></select>
                                </div>
                            </div>

                            <div class="form-group" id="divThree">
                                <label class="col-sm-2 control-label">详情:</label>

                                <div class="col-sm-4" style="padding-top: 6.5px;">
                                    <select class="form-control" id="videoList" name="videoId">
                                        <option value="">请选择视频</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-12" style="text-align: center">
                                    <a href="javascript:void(0)" onclick="_bannerInfo.fn.subInfo()" class="btn btn-primary" role="button">保存</a>
                                    <a href="backend/banner/index" class="btn btn-primary" role="button">返回</a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.panel-body -->

                </div>
            </div>
        </div>

    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<%@ include file="inc/footer.jsp" %>

</body>
<script type="text/javascript">
    var _bannerInfo = {
        v: {
            id: "_bannerInfo",
            list: [],
            dTable: null,
            postId: 0,
            status: 0
        },
        fn: {
            init: function () {
                _bannerInfo.fn.loadData();

                //套图主图预览
                $("#mainImage").uploadPreview({
                    Img: "mainPicture",
                    Width: 200,
                    Height: 170
                });

                $('#videoTypeList').change(function () {
                    _bannerInfo.fn.getVideoList($(this).val());
                });
            },
            loadData: function () {
                _bannerInfo.fn.getVideoTypeList();

                var cover = $('#bannerCover').val();
                if (null == cover || cover == '') {
                    $('#mainPicture').prop('src', 'static/images/add.jpg');
                } else {
                    $('#mainPicture').prop('src', cover);
                }

                var linkUrl = $('#bannerLinkUrl').val();
                if (null == linkUrl || linkUrl == '') {
                    _bannerInfo.fn.changeRadio(2, 0);
                } else {
                    _bannerInfo.fn.changeRadio(1, 0);
                }
            },
            changeRadio: function (flag, status) {
                if (flag == 1) {
                    $('#radioOne').prop('checked', true);
                    $('#radioTwo').prop('checked', false);


                    $('#divOne').css('display', '');
                    $('#divTwo').css('display', 'none');
                    $('#divThree').css('display', 'none');
                } else {
                    $('#radioOne').prop('checked', false);
                    $('#radioTwo').prop('checked', true);

                    $('#divOne').css('display', 'none');
                    $('#divTwo').css('display', '');
                    $('#divThree').css('display', '');
                }

                if (status != 0) {
                    $('#linkUrl').val('');
                    $('#videoTypeList').val('');
                    $('#videoList').val('');
                }
            },
            AddImg: function () {
                // a标签绑定onclick事件
                $('#mainImage').click();
            },
            getVideoTypeList: function () {
                $leoman.ajax("common/videoTypeList", null, function (result) {
                    if (null != result) {
                        var content = "<option value=''>请选择分类</option>";
                        jQuery.each(result, function (i, item) {
                            content += "<option value='" + item.id + "'>" + item.name + "</option>";
                        });
                        $('#videoTypeList').append(content);

                        var videoTypeId = $('#bannerVideoTypeId').val();
                        if (null != videoTypeId && videoTypeId != '') {
                            $('#videoTypeList').val(videoTypeId);

                            _bannerInfo.fn.getVideoList(videoTypeId);
                        }
                    } else {
                        $leoman.notify("获取视频分类信息失败", "error");
                    }
                });
            },
            getVideoList: function (videoTypeId) {
                $('#videoList').html('');

                $leoman.ajax("common/videoList", {
                    videoTypeId: videoTypeId
                }, function (result) {
                    if (null != result) {
                        var content = "<option value=''>请选择视频</option>";
                        jQuery.each(result, function (i, item) {
                            content += "<option value='" + item.id + "'>" + item.video.name + "</option>";
                        });
                        $('#videoList').append(content);

                        var videoId = $('#bannerVideoId').val();
                        if (null != videoId && videoId != '') {
                            $('#videoList').val(videoId);
                        }
                    } else {
                        $leoman.notify("获取视频信息失败", "error");
                    }
                });
            },
            subInfo: function () {
                var flag = true;
                var bannerType = $('input[name="bannerType"]:checked').val();
                var linkUrl = $('#linkUrl').val();
                var videoId = $('#videoList option:selected').val();
                var url = $('#mainPicture').prop('src');

                if (null == url || url == '' || url == _basePath + 'static/images/add.jpg' || url == 'static/images/add.jpg') {
                    $leoman.notify("请上传广告图片", "error");
                    flag = false;
                    return;
                }

                if (bannerType == 1) {
                    if (null == linkUrl || linkUrl == '') {
                        $leoman.notify("请输入外链地址", "error");
                        flag = false;
                        return;
                    }
                } else {
                    if (null == videoId || videoId == '') {
                        $leoman.notify("请选择视频", "error");
                        flag = false;
                        return;
                    }
                }

                // 所有的验证通过后，执行新增操作
                if (flag) {
                    $("#infoForm").ajaxSubmit({
                        url: _basePath + "backend/banner/save",
                        dataType: "json",
                        success: function (result) {
                            if (result > 0) {
                                $leoman.notify("操作成功", "success");
                            } else {
                                $leoman.notify("操作失败", "error");
                            }
                        }
                    });
                }
            }
        }
    }

    $(document).ready(function () {
        _bannerInfo.fn.init();
    });

</script>

</html>